import React from 'react';

import { FormInstance } from 'antd/lib/form';

import { Form, Input, Button, Row, Col, Tabs, Radio, DatePicker, 
	Table, Checkbox, Pagination, Badge, Modal, Steps, Alert } from 'antd';

import Pay from './component/pay/index';

const { TabPane } = Tabs;

const { RangePicker } = DatePicker;

const OrderTitle = () => {
	return (
		<Row>
			<Col span={10}>订单号：09924</Col>
			<Col span={14}>下单时间：2020/12/30 13:07:18</Col>
		</Row>
	)
}

const columns = function (keys){
	return [
		{
			title: <OrderTitle/>,
		    dataIndex: 'number',
		    key: 'number',
		    render: (value, row, index) => {
		    	let obj = {
			        children: '2021“凝心聚力·众志成城”全国微电影大赛征片启事',
			        props: {},
			    };
			    if(index === 0){
			    	obj.props.rowSpan = 4;
			    }else if(index < 4){
			    	obj.props.colSpan = 0;
			    }else{
			    	obj.children = '-'
			    	obj.props.colSpan = 1;
			    }
		    	return obj 
		    }
		},
		{
			title: '自助下单',
		    dataIndex: 'number',
		    width: 120,
		    key: 'number',
		    render: (value, row, index) => {
				let view = null;
				if(keys == 1){
					view = (<>
		    			<div><Button type="primary" danger onClick={ () => {
		    				this.handleEdit()
		    			}}>立即支付</Button></div>
		    			<div style={{marginTop: 5}}><Button onClick={() => this.handelOrider()}>取消订单</Button></div>
		    		</>);
				}else if(keys == 2){
					view = (<><div><Button type="primary">已付款</Button></div></>)
				}else{
					view = (<><div><Button disabled>已取消</Button></div></>)
				}
		    	let obj = {
			        children: view,
			        props: {},
			    };
			    if(index === 0){
			    	obj.props.rowSpan = 4;
			    }else if(index < 4){
			    	obj.props.colSpan = 0;
			    }else{
			    	obj.children = '-'
			    	obj.props.colSpan = 1;
			    }
		    	return obj 
		    }
		},
		{
			title: '媒体数量：4',
		    dataIndex: 'number',
		    width: 240,
		    key: 'number',
		    render: (_,item) => {
				
		    	return (
		    		<>
		    			<img width="40" height="16" src="https://pic.wangmei360.com/res/logo/0"/>
		    			四川日报网
		    		</>
		    	)
		    }
		},
		{
			title: (<><span>订单总额：￥915</span><span style={{color: 'red'}}>（红包支付2元）</span></>),
		    dataIndex: 'number',
		    width: 160,
		    key: 'number',
			colSpan: 2,
		    render: (_,item) => {
		    	return '￥474.00'
		    }
		},
		{
			title: '状态',
			dataIndex: 'number',
			width: 160,
			colSpan: 0,
		    key: 'number',
			render: (_,item) => {
				let view = null;
				if(item.key == 0){
					view = <Button type="primary" size="small">已付款</Button>;
				}else if(item.key == 1){
					view = <Button disabled size="small">已退稿</Button>;
				}else {
					return '-'
				}
				

		    	return view
		    }
		}
	];
}

const columns1 = function(){
	return [
		{
			title: '订单号',
			dataIndex: 'code',
			width: '120px'
		},
		{
			title: '稿件标题',
			dataIndex: 'title'
		},
		{
			title: '发稿媒体',
			dataIndex: 'media',
			width: '270px',
		},
		{
			title: '价格',
			dataIndex: 'paice',
			width: '80px'
		},
		{
			title: '出稿回链',
			dataIndex: 'link',
			width: '90px',
			render(){
				return <a style={{color: 'red'}}>查看回链</a>
			}
		},
		{
			title: '状态',
			dataIndex: 'status',
			width: '80px',
			render: () => {
				return (
					<>
						<Button size="small" type="primary" onClick={() => this.setState({stepDialog: true}) }>已发布</Button>
					</>
				) 
			}
		},
		{
			title: '下单时间',
			dataIndex: 'time1',
			width: '170px'
		},
		{
			title: '发布时间',
			dataIndex: 'time2',
			width: '170px'
		},
		{
			title: '操作',
			dataIndex: 'title',
			width: '180px',
			render: () => {
				return (
					<>
						<Button size="small" type="primary" style={{marginRight: 10}} onClick={() => this.setState({afterDialog: true})}>申请售后</Button>
						<Button type="primary" size="small">再发布</Button>
					</>
				) 
			}
		},
	];
}



const columns2 = function() {
	return [
		{
			title: '订单号',
			dataIndex: 'code',
			width: '100px'
		},
		{
			title: '稿件标题',
			dataIndex: 'title'
		},
		{
			title: '发稿媒体',
			dataIndex: 'media',
			width: '270px',
		},
		{
			title: '价格',
			dataIndex: 'paice',
			width: '80px'
		},
		{
			title: '状态',
			dataIndex: 'status',
			width: '80px',
			render: () =>{
				return <Button size="small" type="primary" onClick={() => {
					this.handelIsRetreat()
				} }>已退稿</Button>
			}
		},
		{
			title: '退稿原因',
			dataIndex: 'title',
			width: '180px',
			render: () => {
				return '内容不合适'
			}
		},
		{
			title: '下单时间',
			dataIndex: 'time1',
			width: '180px'
		},
		{
			title: '退稿时间',
			dataIndex: 'time2',
			width: '180px'
		},
		{
			title: '操作',
			dataIndex: 'title',
			width: '100px',
			render: () => {
				return <Button type="primary" size="small">再发布</Button>
			}
		},
	]
} 



const columns3 = function () {
	return [
		{
			title: '订单号',
			dataIndex: 'code',
			width: '100px'
		},
		{
			title: '稿件标题',
			dataIndex: 'title'
		},
		{
			title: '发稿媒体',
			dataIndex: 'media',
			width: '270px',
		},
		{
			title: '价格',
			dataIndex: 'paice',
			width: '100px'
		},
		{
			title: '出稿回链',
			dataIndex: 'link',
			width: '100px',
			render(){
				return <a style={{color: 'red'}}>查看回链</a>
			}
		},
		{
			title: '状态',
			dataIndex: 'status',
			width: '100px',
			render: () => {
				return <Button size="small" danger  type="primary" onClick={() => this.handelAfterSale()}>待售后</Button>
			}
		},
		{
			title: '下单时间',
			dataIndex: 'time1',
			width: '180px'
		},
		{
			title: '发布时间',
			dataIndex: 'time2',
			width: '180px'
		},
		{
			title: '操作',
			dataIndex: 'title',
			width: '100px',
			render: () => {
				return <Button type="primary"  size="small">再发布</Button>
			}
		},
	
	];
}






const {Step} = Steps;
class StepModal extends React.Component{
	handleOk = () => {
		this.props.onCancel()
	}
	handleCancel = () => {
		this.props.onCancel()
	}
	render(): React.ReactNode {
		const {visible} = this.props;
		return (<>
			<Modal title={(<>
				<span>订单消息</span>
				<span style={{marginLeft: 20,fontSize: 14}}>订单号：09924</span>
			</>)} visible={visible} footer={null} onOk={() => this.handleOk()} onCancel={() => this.handleCancel()}>
				<Steps direction="vertical" size="small" current={2}>
					<Step title="2020-12-23 08:26:58" description={(<>
						<p style={{margin: 0}}>状态： <Button size="small" disabled>已发布</Button></p>
						<p style={{margin: 0}}>回链：https://shimo.im/docs/twhQWDjTyxKyqpqj/read</p>
						<Alert message={(<>
							<p style={{margin: 0}}>有问题，请 <Button size='small'>点我上报</Button>进行反馈或联系客服沟通解决。</p>
						</>)} type="info" showIcon />
					</>)} />
					<Step title="2020-12-22 08:26:58" description={(<>
						<p style={{margin: 0}}>状态： <Button size="small" disabled>发布中</Button></p>
						<p style={{margin: 0}}>备注：媒体已接单，稿件发布中</p>
					</>)} />
					<Step title="2020-12-21 08:26:58" description={(<>
						<p style={{margin: 0}}>新浪网-广东（首发）下单成功</p>
					</>)} />
				</Steps>
			</Modal>
		</>)
	}
}

class StepRetreatModal extends React.Component{
	handleOk = () => {
		this.props.onCancel()
	}
	handleCancel = () => {
		this.props.onCancel()
	}
	render(): React.ReactNode {
		const {visible} = this.props;
		return (<>
			<Modal title={(<>
				<span>订单消息</span>
				<span style={{marginLeft: 20,fontSize: 14}}>订单号：09924</span>
			</>)} visible={visible} footer={null} onOk={() => this.handleOk()} onCancel={() => this.handleCancel()}>
				<Steps direction="vertical" size="small" current={2}>
					<Step title="2020-12-21 08:26:58" description={(<>
						<p style={{margin: 0}}>状态： <Button size="small" disabled>已退稿</Button></p>
						<p style={{margin: 0}}>备注：退稿成功，内容不合适</p>
					</>)} />
					<Step title="2020-12-22 08:26:58" description={(<>
						<p style={{margin: 0}}>状态： <Button size="small" disabled>发布中</Button></p>
						<p style={{margin: 0}}>备注：媒体已接单，稿件发布中</p>
					</>)} />
					<Step title="2020-12-21 08:26:58" description={(<>
						<p style={{margin: 0}}>新浪网-广东（首发）下单成功</p>
					</>)} />
				</Steps>
			</Modal>
		</>)
	}
}

class AfterSaleModal extends React.Component{
	handleOk = () => {
		this.props.onCancel()
	}
	handleCancel = () => {
		this.props.onCancel()
	}
	render(): React.ReactNode {
		const {visible} = this.props;
		return (<>
			<Modal title={(<>
				<span>订单消息</span>
				<span style={{marginLeft: 20,fontSize: 14}}>订单号：09924</span>
			</>)} visible={visible} footer={null} onOk={() => this.handleOk()} onCancel={() => this.handleCancel()}>
				<Steps direction="vertical" size="small" current={2}>
					<Step title="2020-12-21 08:26:58" description={(<>
						<p style={{margin: 0}}>状态： <Button size="small" disabled>售后中-链接失效</Button></p>
						<p style={{margin: 0}}>备注：问题上报成功，请耐心等待</p>
					</>)} />
					<Step title="2020-12-22 08:26:58" description={(<>
						<p style={{margin: 0}}>状态： <Button size="small" disabled>已发布</Button></p>
						<p style={{margin: 0}}>备注：http://www.baidu.com</p>
					</>)} />
					<Step title="2020-12-22 08:26:58" description={(<>
						<p style={{margin: 0}}>状态： <Button size="small" disabled>发布中</Button></p>
						<p style={{margin: 0}}>备注：媒体已接单，稿件发布中</p>
					</>)} />
					<Step title="2020-12-21 08:26:58" description={(<>
						<p style={{margin: 0}}>新浪网-广东（首发）下单成功</p>
					</>)} />
				</Steps>
			</Modal>
		</>)
	}
}

class AfterSales extends React.Component{
	formRef = React.createRef<FormInstance>();
	handleOk = () => {
		this.props.onCancel()
	}
	handleCancel = () => {
		this.props.onCancel()
	}
	render(){
		const {visible} = this.props;
		return (<>
			<Modal width={600} visible={visible} title="新浪网-广东(首发)-售后（05093-1）" onOk={() => this.handleOk()} onCancel={() => this.handleCancel()}>
				<Form ref={this.formRef}>
					<Form.Item
						name="value"
					>
						<span style={{marginLeft: 70}}>第十三届创业年会，新宝科技荣获“2021年最具影响力企业top50”</span>
					</Form.Item>
					<Form.Item
						name="value1"
						label="稿件问题"
					>
						<Radio.Group>
							<Radio value="a">内容有误</Radio>
							<Radio value="b">错误链接</Radio>
							<Radio value="c">未收录</Radio>
							<Radio value="d">链接失效</Radio>
						</Radio.Group>
					</Form.Item>
					<Form.Item
						name="value2"
						label="链接地址"
					>
						<Input placeholder='选填（如果稿件内容有误修改，请提供正确内容链接地址）'/>
					</Form.Item>
				</Form>
			</Modal>
		</>)
	}
}

const columns4 = () => {
	return [
		{
			title: '订单号',
			dataIndex: 'code',
			width: '100px'
		},
		{
			title: '稿件标题',
			dataIndex: 'title'
		},
		{
			title: '发稿媒体',
			dataIndex: 'media',
			width: '270px',
		},
		{
			title: '价格',
			dataIndex: 'paice',
			width: '100px'
		},
		{
			title: '状态',
			dataIndex: 'status',
			width: '150px',
			render: (_,item,index) => {
				return (<Button size='small'>待处理</Button>)
			}
		},
		{
			title: '下单时间',
			dataIndex: 'time',
			width: '220px'
		},
		{
			title: '操作',
			dataIndex: 'time',
			width: '220px',
			render: () => {
				return (<>
					<Button size='small' onClick={() => this.handelRetreat()}>申请退稿</Button>
					<Button size='small' style={{marginLeft: 10}}>在发布</Button>
				</>)
			}
		},
	]
} 

let tableData1 = [];

for(let i=0;i<10;i++){
	tableData1.push({
		key: i,
		code: '05646-1',
		title: '广州"互联网超级之星"评选揭晓，新报科技获"最有价值品牌奖"',
		media: '人民日报经济周刊（中国经济周刊）',
		paice: '¥168.00',
		link: '查看回链',
		status: '',
		time1: '2021/09/03 10:50:50',
		time2: '2021/09/03 10:50:50'
	})
}

let tableData = [];

for(let i=0;i<4;i++){
	tableData.push({
		key: i
	})
}

let sumTableData = [
	'1','2','3','4','5'
]

const config = {
	title: '提示!',
	okText: '狠心关闭',
	cancelText: '在想想',
	content: (
	  <>
		你确定要关闭该订单吗？
	  </>
	),
  };

export default class MyOrder extends React.Component{
	formRef = React.createRef<FormInstance>();
	state = {
		selectedRowKeys: [],
		count: 0,
		tabKey: '1',
		stepDialog: false,
		afterDialog: false,
		afterStepDialog: false,
		afterSaleDialog: false
	}
	onSelectChange = () => {

	}
	handleEdit = () => {
		this.props.history.push({
			pathname: "/publishingCenter/myOrder/12345"
		})
	}
	handelOrider = () => {
		Modal.confirm(config);
	}
	handelRetreat = () => {
		this.setState({afterDialog: true})
	}
	handelIsRetreat = () => {
		this.setState({afterStepDialog: true})
	}
	handelAfterSale = () => {
		this.setState({afterSaleDialog: true}) 
	}
	render(){
		const { location } = this.props;
		const str = location.pathname.split('/');
		if(str[str.length - 1] !== 'myOrder'){
			return <Pay id={str[str.length - 1]}/>
		}
		const newColumns = columns.bind(this);
		const {selectedRowKeys, tabKey, stepDialog, afterDialog, afterStepDialog, afterSaleDialog} = this.state
		const rowSelection = {
	      selectedRowKeys,
	      hideSelectAll: true,
	      onChange: this.onSelectChange,
	      renderCell: (value, row, index) => {
	      	const obj = {
		        children: <Checkbox ></Checkbox>,
		        props: {},
		    };
		    if(index === 0){
		    	obj.props.rowSpan = 4;
		    }else{
		    	obj.props.colSpan = 0;
		    }
	    	return obj 
	      }
	    };
	    let newcolumns = [];
	    if(tabKey === '4'){
	    	newcolumns = columns2.bind(this)();
	    }else if(tabKey === '3'){
	    	newcolumns = columns1.bind(this)();
	    }else if(tabKey === '5'){
	    	newcolumns = columns3.bind(this)();
	    }else{
			newcolumns = columns4.bind(this)();
		}
		
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<Tabs defaultActiveKey="1" onChange={(key) => {this.setState({tabKey: key})}}>
					<TabPane tab={(<><span>所有订单</span> <Badge
						count={100}
						overflowCount={1000000}
						style={{ backgroundColor: '#52c41a' }}
					/></>)} key="1">
					</TabPane>
					<TabPane tab={(<><span>进行中</span> <Badge
						count={10}
						overflowCount={1000000}
						style={{ backgroundColor: '#52c41a' }}
					/></>)} key="2">
					</TabPane>
					<TabPane tab={(<><span>已完成</span> <Badge
						count={10}
						overflowCount={1000000}
						style={{ backgroundColor: '#52c41a' }}
					/></>)} key="3">
					</TabPane>
					<TabPane tab={(<><span>已退稿</span> <Badge
						count={10}
						overflowCount={1000000}
						style={{ backgroundColor: '#52c41a' }}
					/></>)} key="4">
					</TabPane>
					<TabPane tab={(<><span>售后中</span> <Badge
						count={110}
						overflowCount={1000000}
						style={{ backgroundColor: '#52c41a' }}
					/></>)} key="5">
					</TabPane>
				</Tabs>	
				<Form ref={this.formRef}>
					
					<Form.Item
						name="value"
			            label="订单类型"
					>
						<Radio.Group>
							<Radio value={1}>发稿</Radio>
						</Radio.Group>
					</Form.Item>
					<Form.Item
						name="value1"
			            label="订单日期"
					>
						<RangePicker />
					</Form.Item>
					<Form.Item
						name="value3"
			            label="订单状态"
					>
						<Radio.Group>
							<Radio value={1}>不限</Radio>
							<Radio value={2}>已付款</Radio>
							<Radio value={3}>未付款</Radio>
							<Radio value={4}>已取消</Radio>
						</Radio.Group>
					</Form.Item>
					<Row>
						<Col span={6}>
							<Form.Item
								name="value2"
					            label="订单搜索"
							>
								<Input placeholder="支持订单编号、稿件标题、我的标记 一键查询。" />
							</Form.Item>
						</Col>
						<Col span={6}>
							<Form.Item>
								<Button type="primary"  htmlType="submit" style={{marginRight: 10,marginLeft: 10}}>
		                            查询一下
		                        </Button>
		                        <Button>
		                            数据导出
		                        </Button>
			                </Form.Item>
						</Col>
					</Row>
				</Form>
				{
					tabKey === '1' ? (sumTableData.map(item => (
											<div key={item} style={{marginBottom: 10}}>
												<Table bordered pagination={false} columns={ newColumns(item)} dataSource={tableData} />
											</div>
										))) : (<Table pagination={false} columns={newcolumns} dataSource={tableData1}/>)
				}
				<div style={{paddingTop: 8,textAlign: 'right'}}>
					<Pagination
					total={85}
					defaultPageSize={5}
					showSizeChanger
					showQuickJumper
					showTotal={total => `共 ${total} 条`}
					/>
				</div>
				<StepModal visible={stepDialog} onCancel={() => this.setState({stepDialog: false})}></StepModal>
				<AfterSales visible={afterDialog} onCancel={() => this.setState({afterDialog: false})} />
				<StepRetreatModal visible={afterStepDialog} onCancel={() => this.setState({afterStepDialog: false})}  />
				<AfterSaleModal visible={afterSaleDialog} onCancel={() => this.setState({afterSaleDialog: false})} />
			</div>
		)
	}
}